
import React, { useRef, useState } from 'react';
import { Modal, IvButton } from '@/components'



const TableTest: React.FC = () => {
  const ModalRef = useRef<any>()

  function showModal(callback) {
    // 具体使用看 ant网站
    ModalRef.current.Modal.error({
      title: 'This is an error message',
      content: 'some messages...some messages...',
    })
    callback()
  }
  function showModal2(callback) {
    ModalRef.current.showModal()
    setTimeout(() => {
      callback()
    }, 2000)
  }
  function handleOk(type) {
    ModalRef.current.hide()
  }
  return (
    <div>

      <IvButton type="primary" onClick={showModal}>
        出现其他
      </IvButton>
      <IvButton type="primary" onClick={showModal2}>
        出现弹窗
      </IvButton>
      <Modal handleOk={handleOk} ref={ModalRef} title='木兰辞' autoClose={false}>
        <h1 style={{textAlign:'center'}}>木兰辞</h1>
        <div style={{fontSize:'16px',fontWeight:'700',lineHeight:'30px'}}>
          <div style={{textIndent:'24px'}}>
            唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。
          </div>

          <div style={{textIndent:'24px'}}>
            问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。
          </div>

          <div style={{textIndent:'24px'}}>
            东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。

          </div>
          <div style={{textIndent:'24px'}}>
            万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归。

          </div>
          <div style={{textIndent:'24px'}}>
            归来见天子，天子坐明堂。策勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。

          </div>
          <div style={{textIndent:'24px'}}>
            爷娘闻女来，出郭相扶将；阿姊闻妹来，当户理红妆；小弟闻姊来，磨刀霍霍向猪羊。开我东阁门，坐我西阁床，脱我战时袍，著我旧时裳。当窗理云鬓，对镜帖花黄。出门看火伴，火伴皆惊忙：同行十二年，不知木兰是女郎。

          </div>
          <div style={{textIndent:'24px'}}>
            雄兔脚扑朔，雌兔眼迷离；双兔傍地走，安能辨我是雄雌？
          </div>
        </div>
      </Modal>


    </div>
  )
}

export default TableTest;
